<template>
  <div>
    <!-- --------------------------------搜索框----------------------------- -->
    <div slot="header" class="clearfix">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input
            v-model="query.customerNo"
            placeholder="编码"
            :clearable="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="query.customerName"
            placeholder="名称"
            :clearable="true"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="query.customerLevel" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="loadCustomers"
          >搜索
          </el-button
          >
          <el-button type="success" @click="dialog.addShow = true"
          >新建
          </el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <!-- -----------------------------分页显示数据--------------------------------------- -->
    <el-table :data="customerList" border style="width: 100%">
      <el-table-column type="index" width="50" label="序号"></el-table-column>

      <el-table-column prop="customerNo" label="编号" width="150">
      </el-table-column>
      <el-table-column prop="customerLevel" label="有效" width="150">
        <template slot-scope="scope">
          <el-tag :type="scope.row.customerLevel === '1' ? 'success' : ''">
            {{ scope.row.customerLevel === '1' ? '个人用户' : '公司用户' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="customerName" label="名称" width="150">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="150">
      </el-table-column>
      <el-table-column prop="customerPerson" label="联系人" width="150">
      </el-table-column>
      <el-table-column prop="tel" label="电话" width="150"></el-table-column>
      <el-table-column prop="mobile" label="手机" width="150">
      </el-table-column>
      <el-table-column prop="email" label="email" width="150">
      </el-table-column>
      <el-table-column prop="delFlag" label="有效" width="150">
        <template slot-scope="scope">
          <el-tag :type="scope.row.delFlag === 0 ? 'success' : 'danger'">
            {{ scope.row.delFlag === 0 ? '有效' : '无效' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="450">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="small"
            @click="handleEdit(scope.row.id)"
          >编辑
          </el-button
          >
          <el-popconfirm
            title="这是一段内容确定删除吗？"
            @confirm="handleDelete(scope.row.id)"
          >
            <el-button
              type="danger"
              slot="reference"
              size="mini"
              icon="el-icon-delete"
            >删除
            </el-button>
          </el-popconfirm>
          <el-button
            v-if="scope.row.delFlag === 0"
            type="warning"
            slot="reference"
            size="mini"
            icon="el-icon-warning"
            @click="handleQuit(scope.row.id,scope.row.delFlag)"
          >禁用
          </el-button>
          <el-button
            v-else-if="scope.row.delFlag === 1"
            type="success"
            slot="reference"
            size="mini"
            icon="el-icon-warning"
            @click="handleQuit(scope.row.id,scope.row.delFlag)"
          >恢复
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="query.currentPage"
      :page-sizes="pageInfo.pageSizes"
      :page-size="query.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
    <!-- ------------------------------------添加操作------------------------------------ -->
    <el-dialog title="添加货主" :visible.sync="dialog.addShow" width="30%">
      <el-form ref="addForm" :model="addCustomer" :rules="rules">
        <el-form-item
          label="编码"
          :label-width="formLabelWidth"
          prop="customerNo"
        >
          <el-input v-model="addCustomer.customerNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="公司类型"
          :label-width="formLabelWidth"
          prop="customerLevel"
        >
          <el-select v-model="addCustomer.customerLevel" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="公司名称"
          :label-width="formLabelWidth"
          prop="customerName"
        >
          <el-input v-model="addCustomer.customerName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="地址"
          :label-width="formLabelWidth"
          prop="address"
        >
          <el-input v-model="addCustomer.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人" :label-width="formLabelWidth" prop="customerPerson">
          <el-input v-model="addCustomer.customerPerson" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="tel">
          <el-input v-model="addCustomer.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth" prop="mobile">
          <el-input v-model="addCustomer.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="email" :label-width="formLabelWidth" prop="email">
          <el-input v-model="addCustomer.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.addShow = false">取 消</el-button>
        <el-button type="primary" @click="add()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- ------------------------------------修改操作------------------------------------ -->
    <el-dialog title="修改货主" :visible.sync="dialog.updateShow" width="30%">
      <el-form ref="updateForm" :model="updateCustomer" :rules="rules">
        <el-form-item
          label="编码"
          :label-width="formLabelWidth"
          prop="customerNo"
        >
          <el-input v-model="updateCustomer.customerNo" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="公司类型"
          :label-width="formLabelWidth"
          prop="customerLevel"
        >
          <el-select v-model="updateCustomer.customerLevel" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="公司名称"
          :label-width="formLabelWidth"
          prop="customerName"
        >
          <el-input v-model="updateCustomer.customerName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="地址"
          :label-width="formLabelWidth"
          prop="address"
        >
          <el-input v-model="updateCustomer.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系人" :label-width="formLabelWidth" prop="customerPerson">
          <el-input v-model="updateCustomer.customerPerson" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth" prop="tel">
          <el-input v-model="updateCustomer.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth" prop="mobile">
          <el-input v-model="updateCustomer.mobile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="email" :label-width="formLabelWidth" prop="email">
          <el-input v-model="updateCustomer.email" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateShow = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "owner.vue",
  data() {
    return {
      checkList: ['选中且禁用', '复选框 A'],
      formLabelWidth: "100px",
      addCustomer: {},
      updateCustomer: {},
      quitCustomer: {},
      rules: {
        customerName: [
          {required: true, message: "请输入公司名称", trigger: "blur"},
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },

        ],
        customerNo: [
          {required: true, message: "请输入编码", trigger: "blur"},
          {pattern: /[a-z]{2}\d*/, message: '请输入以两位小写英文字母开头的编码', trigger: 'blur'}
        ],
        customerLevel:[],
        address:[
          {required: true, message: "请输入地址", trigger: "blur"},
        ],
        tel:[
          {required: true, message: "请输入电话", trigger: "blur"},
          {pattern: /^\d*$/, message: '只能输入数字', trigger: 'blur'},
          {len: 7, message: '长度为7', trigger: 'blur'}
        ],
        mobile:[
          {required: true, message: "请输入手机号", trigger: "blur"},
          {pattern: /^\d*$/, message: '只能输入数字', trigger: 'blur'},
          {len: 11, message: '长度为6', trigger: 'blur'}
        ],
        customerPerson:[
          {required: true, message: "请输入联系人", trigger: "blur"},
          {
            min: 3,
            max: 4,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        email:[
          {required: true, message: "请输入email", trigger: "blur"},
        ]
      },
      dialog: {
        addShow: false,
        updateShow: false,
        roleShow: false,
      },
      query: {
        customerNo: "",
        customerName: "",
        customerLevel: "",
        currentPage: 1, //当前页
        pageSize: 5, //每页显示的条数
      },
      pageInfo: {
        total: 0, //总条数
        pageSizes: [5, 10, 20, 50],
      },
      customerList: [],
      options: [{
        value: '1',
        label: '个体用户'
      }, {
        value: '2',
        label: '公司用户'
      }],
    };
  },
  methods: {
    handleEdit(id) {
      this.$axios.get("/customer/" + id).then((res) => {
        this.updateCustomer = res.data.data.customer;
        this.dialog.updateShow = true; //显示模态框
      });
    },
    update() {
      this.$axios.put("/customer/", this.updateCustomer).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.dialog.updateShow = false; //关于模态框
          this.loadCustomers(); //重新加载数据
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleDelete(id) {
      this.$axios.delete("/customer/" + id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.loadCustomers(); //重新加载数据
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    add() {
      this.$axios.post("/customer/", this.addCustomer).then((res) => {
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.dialog.addShow = false; //关于模态框
          this.$refs.addForm.resetFields(); //清空表单数据
          this.loadCustomers(); //重新加载数据
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.loadUsers();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.loadUsers();
    },
    loadCustomers() {
      this.$axios.post("/customer/queryAll", this.query).then((res) => {
        this.customerList = res.data.data.list;
        // this.customerList = res.data.data.list.map((customer) => {
        //   customer.delFlag = customer.delFlag === 0 ? '有效' : '禁用';
        //   return customer;
        // });
        //返回当前页数据
        this.pageInfo.total = res.data.data.total; //返回一共有多少条数据
      });
    },
    handleQuit(id,delFlag) {
      this.$set(this.quitCustomer, 'id', id);
      delFlag = (delFlag === 0?1:0);
      this.$set(this.quitCustomer, 'delFlag', delFlag);
      this.$axios.put("/customer/quit",this.quitCustomer).then((res)=>{
        if (res.data.code == 200) {
          this.$message.success(res.data.message);
          this.loadCustomers(); //重新加载数据
        } else {
          this.$message.error(res.data.message);
        }
      })
    }
  },
  mounted() {
    this.loadCustomers();
  },
}
</script>

<style scoped>

</style>

